/*
 * @Author: nainaiyi s15037075861@163.com
 * @Date: 2022-10-21 19:55:28
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-10-27 08:09:59
 * @FilePath: \audit-app\src\pages\homer\index.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useEffect, useState } from 'react'
import { Input, Swiper, Grid, Image, Card, Tag, Button, IndexBar, Tabs, Cell } from 'react-vant'
import { FriendsO, HomeO, Search, ChatO, LocationO } from '@react-vant/icons'
import { useNavigate } from 'react-router-dom'
import { httpInformation } from '../../api/information'//热门资讯
import { httpHousing } from '../../api/housing'//热门楼盘
import { httpAgent } from '../../api/agent'
import "./index.css"

const Information = () => {
    const navigate = useNavigate();
    const [data, setData] = useState([]);// 获取热门资讯
    const [housing, setHousing] = useState([]);// 获取热门楼盘
    const [agent,setAgent]=useState([])//经纪人
    useEffect(() => {
        fetch_data();// 获取热门资讯
        getData();// 获取热门楼盘
        getAgent();//经纪人
    }, [])
    // 获取热门资讯
    const fetch_data = async () => {
        const res = await httpInformation('/information');
        setData(res.data.results.slice(0,4));
        console.log(res,'ll')
    }
    // 获取热门楼盘
    const getData = async () => {
        const res = await httpHousing('/housing');
        setHousing(res.data.results.slice(0, 5));
        console.log(res.data.results);
    }
    //经纪人
    const getAgent = async () => {
        const res = await httpAgent('/agent');
        setAgent(res.data.results);
        console.log(res.data.results);
    }
    // 城市站点
    const city=()=>{
        navigate('/city')
    }
    return (
        <div className='homer'>
            <div className='homer-top'>
                <div className='homer-title'>宏烨找房</div>
                <div className='search'>
                    <div className='search-box'>
                        <div className='homer-city' onClick={()=>city()}>
                            {JSON.parse(localStorage.getItem('city'))||'上海'}
                        </div>
                        <div className='homer-input-box'>
                            <div className='homer-input'>
                                <Input placeholder='请在这里输入区域/商圈' />
                            </div>
                            <div className='homer-input-icon'>
                                <Search fontSize="20px" color="#fff" />
                            </div>

                        </div>
                    </div>
                    {/* 进入地图 */}
                    <LocationO style={{fontSize:'20px',color:'#fff'}} onClick={()=>{navigate('/map')}}/>
                </div>
            </div>
            <div className="content">
                {/* 轮播图 */}
                <div className="demo-swiper">
                    <Swiper autoplay={5000} >
                        <Swiper.Item >
                            <img src={require('../../img/swiper1.jpg')} style={{ height: '100%', width: '100%' }} />
                        </Swiper.Item>
                        <Swiper.Item>
                            <img src={require('../../img/swiper2.jpg')} style={{ height: '100%', width: '100%' }} />
                        </Swiper.Item>
                        <Swiper.Item>
                            <img src={require('../../img/swiper3.jpg')} style={{ height: '100%', width: '100%' }} />
                        </Swiper.Item>

                    </Swiper>

                </div>

                {/* 小导航 */}
                <div>
                    <Grid gutter={10} className='logo-box' columnNum={5} >
                        <Grid.Item className='rv-grid-item__content' onClick={() => { navigate ('/buyHouse')}}>
                            <Image src={require('../../img/logo1.png')} style={{width:'80%'}}/>
                            <b>买房</b>
                        </Grid.Item>
                        <Grid.Item>
                            <Image src={require('../../img/logo2.png')} style={{ width: '80%' }} onClick={() => { navigate('/rentHouse') }} />
                            <b >租房</b>
                        </Grid.Item>
                        <Grid.Item>
                            <Image src={require('../../img/logo3.png')} style={{ width: '80%' }} onClick={() => { navigate('/rent') }} />
                            <b >求租</b>
                        </Grid.Item>
                        <Grid.Item>
                            <Image src={require('../../img/logo4.png')} style={{ width: '80%' }} onClick={() => { navigate('/gou') }} />
                            <b >求购</b>
                        </Grid.Item>
                        <Grid.Item>
                            <Image src={require('../../img/logo5.png')} style={{ width: '80%' }} onClick={() => { navigate('/mapHouse') }} />
                            <b >地图找房</b>
                        </Grid.Item>
                        <Grid.Item >
                            <Image src={require('../../img/logo6.png')} style={{ width: '80%' }} onClick={() => { navigate('/information') }} />
                            <b>资讯</b>
                        </Grid.Item>
                        <Grid.Item>
                            <Image src={require('../../img/logo7.png')} style={{ width: '80%' }} onClick={() => { navigate('/cityCircle') }} />
                            <b >城市圈</b>
                        </Grid.Item>
                        <Grid.Item>
                            <Image src={require('../../img/logo8.png')} style={{ width: '80%' }} onClick={() => { navigate('/agent') }} />
                            <b >经纪人</b>
                        </Grid.Item>
                        <Grid.Item>
                            <Image src={require('../../img/logo9.png')} style={{ width: '80%' }} onClick={() => { navigate('/bulkHouse') }} />
                            <b >团购看房</b>
                        </Grid.Item>
                        <Grid.Item>
                            <Image src={require('../../img/logo10.png')} style={{ width: '80%' }} onClick={() => { navigate('/liveHouse') }} />
                            <b >直播看房</b>
                        </Grid.Item>
                    </Grid>
                </div>

                {/* 城市资讯 */}
                <div className="information">
                    <Card round >
                        <div className='cardHeader'><b>城市资讯</b>  <span onClick={() => { navigate('/information') }}>更多</span></div>
                        <div className='card-box'>
                        {data && data.map((item, index) => {
                           return (
                               <Card.Body border key={index} >
                                   <div className='tagItem'>
                                       <Tag type="danger" size="medium" className='cardTag'>TOP{index+1}</Tag> &emsp; {item.title}
                                </div>
                               </Card.Body>
                           )
                        })}
                        </div>
                    </Card>
                </div>
                {/* 热门楼盘 */}
                <div className="building">
                    <div className='buildingHeader'><b>热门楼盘</b>  <span onClick={() => navigate('/buyHouse')}>更多</span></div>
                       <div>
                        {
                            housing && housing.map((item, index) => {
                                return (
                                    <dl className='housingDl' key={index}>
                                        <dt>
                                            <img src={item.img} alt="" style={{width:'130px',height:'80px'}}/>
                                        </dt>
                                        <dd>
                                            <b style={{padding:'10px'}}>{item.name}  </b> <br/>
                                            <p style={{ padding: '10px' }}>{item.address}</p>
                                            <b style={{ color: 'orange', padding: '10px' }}>{item.price}万</b>
                                        </dd>
                                    </dl>
                                )
                            })
                        }
                       </div>
                </div>
                {/* 经纪人 */}
                <div className='buildingHeader'><b>经纪人</b><span>更多</span></div>
                <div className='person'>
                    {
                        agent && agent.map((item, index) => {
                            return (
                                <dl className='perItem' key={index}>
                                    <dt><Image className='img' src={item.img} /></dt>
                                    <dd><b>{item.name}</b>
                                        <p>{item.company}</p>
                                        <Button className='perBtn' round type='info'>
                                            <ChatO />咨询</Button></dd>
                                </dl>
                            )
                        })
                    }

                </div>

                {/* 二手房 */}
                <div className="building">
                    <div className='buildingHeader'><b>二手房</b>  <span onClick={()=>navigate('/buyHouse')}>更多</span></div>
                    <div>
                        {
                            housing && housing.map((item, index) => {
                                return (
                                    <dl className='housingDl' key={index}>
                                        <dt>
                                            <img src={item.img} alt="" style={{ width: '130px', height: '80px' }} />
                                        </dt>
                                        <dd>
                                            <b style={{ padding: '10px' }}>{item.name}  </b> <br />
                                            <p style={{ padding: '10px' }}>{item.address}</p>
                                            <b style={{ color: 'orange', padding: '10px' }}>{item.price}万</b>
                                        </dd>
                                    </dl>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Information;